<template>
  <div class="layout-container flex">
    <!-- 业务组件选择 -->
    <div class="w-56 p-3">
      <div class="flex items-start justify-between flex-wrap gap-y-2">
        <template v-for="part in parts" :key="part.path">
          <RouterLink
            class="link-item"
            active-class="link-item-active"
            :to="part.path"
          >
            {{ part.name }}
          </RouterLink>
        </template>
      </div>
    </div>
    <!-- 显示对应的业务组件 -->
    <div class="center">
      <RouterView v-slot="{ Component }">
        <component
          :is="Component"
          :status="currentComJsonSchema.status"
          :serial-num="1"
        />
      </RouterView>
    </div>
    <!-- 编辑面板 -->
    <div class="right">
      <EditPannel :jsonSchema="currentComJsonSchema" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMaterialStore } from "@/stores/useMaterial";
import EditPannel from "./EditPannel.vue";
import type { IUpdateStatus } from "@/types/common";
import { dispatchStatus } from "@/utils/provideFuncs";

defineProps<{
  parts: {
    name: string;
    path: string;
  }[];
}>();

const materialStore = useMaterialStore();
const currentComJsonSchema = computed(
  () => materialStore.coms[materialStore.currentComJsonSchemaName],
);

// * 更新状态
const updateStatus: IUpdateStatus = (statusKey, value) => {
  // console.log(statusKey, value);
  if (value !== undefined) {
    dispatchStatus(
      materialStore,
      currentComJsonSchema.value.status,
      statusKey,
      value,
    );
  }
};

// - 提供更新状态的方法
provide("updateStatus", updateStatus);

const setImageUrl = (index: number, link: string) => {
  // updateStatus("options", { index, link });
  updateStatus("options", {
    index,
    link,
  });
};

// - 提供获取图片链接的方法
provide("setImageUrl", setImageUrl);
</script>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--x-border-color);
  border-top-right-radius: var(--x-border-radius-lg);
  border-bottom-left-radius: var(--x-border-radius-lg);
  border-bottom-right-radius: var(--x-border-radius-lg);
}
.center {
  width: 550px;
  height: 100%;
  overflow-y: scroll;
  padding: 30px;
  border-left: 1px solid var(--x-border-color);
}
.right {
  width: 350px;
  height: 100%;
  overflow-y: scroll;
  border-left: 1px solid var(--x-border-color);
}
</style>
